<template>
  <div id="category">
    <div ref="chart01" class="chart01"></div>
  </div>
</template>

<script>
export default {
  name: "Category",
  props: {
    xData: Array | Object, //时间戳
    roomData_01: Array, //带货直播间
    shopCount_02: Array, //实时直播在售商品数
    vistorCount_03: Array, //实时观看人数
    favoriteCount_04: Array, //实时带货直播间点赞数
    volume_05: Array, //实时直播预估销量
    amount_06: Array, //实时直播预估销售额
    lineY: Boolean,
    tooltipTime: Array,
  },
  data() {
    return {
      oldValue: false,
      seriesList: []
    };
  },
  watch: {
    lineY: {
      handler() {
        this.oldValue = this.lineY;
      },
      deep: true,
    },
    roomData_01: {
      handler(val) {
        if(val.length){
          this.seriesList[0] = {
            name: "带货直播间",
            type: "bar",
            barWidth: "3",
            yAxisIndex: 0,
            data: val,
            itemStyle: {
              normal: {
                color: '#ffc39b',
                //柱子颜色
              },
            },
          }
        }else{
          this.seriesList[0] = undefined
        }
        this.drawChart01();
      },
      deep: true,
    },
    shopCount_02: {
      handler(val) {
        if(val.length){
          this.seriesList[1] = {
            name: "实时直播在售商品数",
            type: "line",
            smooth: true, //平滑曲线
            data: val,
            yAxisIndex: 1,
            itemStyle:{
              normal: {
                color: '#f4c14b'
              }
            }
          }
        }else{
          this.seriesList[1] = undefined
        }
        this.drawChart01();
      },
      deep: true,
    },
    vistorCount_03: {
      handler(val) {
        if(val.length){
          this.seriesList[2] = {
            name: "实时观看人数",
            type: "line",
            smooth: true,
            yAxisIndex: 2,
            data: val,
            itemStyle:{
              color: '#fd7040'
            }
          }
        }else{
          this.seriesList[2] = undefined
        }
        this.drawChart01();
      },
      deep: true,
    },
    favoriteCount_04: {
      handler(val) {
        if(val.length){
          this.seriesList[3] = {
            name: "实时带货直播间点赞数",
            type: "line",
            smooth: true,
            yAxisIndex: 3,
            data: val,
            itemStyle:{
              color: "#3ec0cc" ,
            }
          }
        }else{
          this.seriesList[3] = undefined
        }
        this.drawChart01();
      },
      deep: true,
    },
    volume_05: {
      handler(val) {
        if(val.length){
          this.seriesList[4] = {
            name: "实时直播预估销量",
            type: "line",
            smooth: true,
            yAxisIndex: 4,
            data: val,
            itemStyle:{
              color: "#4c94f6" ,
            }
          }
        }else{
          this.seriesList[4] = undefined
        }
        this.drawChart01();
      },
      deep: true,
    },
    amount_06: {
      handler(val) {
        if(val.length){
          this.seriesList[5] = {
            name: "实时直播预估销售额",
            type: "line",
            smooth: true,
            yAxisIndex: 5,
            data: val,
            itemStyle:{
              color: "#ff9149" ,
            }
          }
        }else{
          this.seriesList[5] = undefined
        }
        this.drawChart01();
      },
      deep: true,
    },
  },
  mounted() {
    this.drawChart01();
  },
  methods: {
    drawChart01() {
      let colors = [
        "#ffc39b",
        "#f4c14b",
        "#fd7040",
        "#3ec0cc",
        "#4c94f6",
        "#ff9149",
      ];
      let that = this;
      let myChart1 = that.$echarts.init(that.$refs.chart01);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
              color: '#e5e5e5',
            },
          },
          formatter: function (params) {
            let result01 = ''
            params.forEach(function (item) {
              result01 +=
                item.marker +
                ' ' +
                item.seriesName +
                ' : ' +
                that.format_num(item.value) +
                '</br>'
            })
            return params[0].name + '</br>' + result01
          },
        },
        grid: {
          left: "2%",
          right: "2%",
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: that.xData.data,
            axisLabel: {
              margin: 14,
              show: true,
              textStyle: {
                color: "#888",
                fontSize: 12,
              },
            },
            axisLine: {
              lineStyle: {
                type: "solid",
                color: "#e5e5e5", //左边线的颜色
                width: "1", //坐标线的宽度
              },
            },
          },
        ],
        yAxis: [
          // 去掉背景网格
          {
            type: "value",
            show: false,
          },
          {
            type: "value",
            show: false,
         
          },
          {
            type: "value",
            show: false,
          },
          {
            type: "value",
            show: false,
          },
          {
            type: "value",
            show: false,
          },
          {
            type: "value",
            show: false,
          },
        ],
        series: that.seriesList,
      };
      // myChart1.clear();
      myChart1.setOption(option, true);
      myChart1.on("click", this.myChart1Nodeclick);
      setTimeout(function () {
        window.addEventListener("resize", function () {
          myChart1.resize();
        });
      }, 200);
    },
    // 节点点击事件
    myChart1Nodeclick(param) {
      if (param.seriesName == "带货直播间") {
        this.roomData_01.forEach((e, i) => {
          if (e == param.data) {
            this.$emit("parentFlowID", this.xData.flowId[i]);
          }
        });
      } else if (param.seriesName == "实时直播在售商品数") {
        this.shopCount_02.forEach((e, i) => {
          if (e == param.data) {
            this.$emit("parentFlowID", this.xData.flowId[i]);
          }
        });
      } else if (param.seriesName == "实时观看人数") {
        this.vistorCount_03.forEach((e, i) => {
          if (e == param.data) {
            this.$emit("parentFlowID", this.xData.flowId[i]);
          }
        });
      } else if (param.seriesName == "实时带货直播间点赞数") {
        this.favoriteCount_04.forEach((e, i) => {
          if (e == param.data) {
            this.$emit("parentFlowID", this.xData.flowId[i]);
          }
        });
      } else if (param.seriesName == "实时直播预估销量") {
        this.volume_05.forEach((e, i) => {
          if (e == param.data) {
            this.$emit("parentFlowID", this.xData.flowId[i]);
          }
        });
      } else if (param.seriesName == "实时直播预估销售额") {
        this.amount_06.forEach((e, i) => {
          if (e == param.data) {
            this.$emit("parentFlowID", this.xData.flowId[i]);
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
#category {
  width: 100%;
  height: 100%;
  .chart01 {
    width: 100%;
    height: 490px;
    overflow: hidden;
    clear: both;
  }
}
</style>